    export default {
        name: "cxtj",
        setup(props) {
            const router = VueRouter.useRouter();
            const route = VueRouter.useRoute();
            const { smartSpeak } = inject('speech'); //语音
            const id = ref(route.query.id);
            const bgsx = ref();
            const title = ref();
            const showNotice = ref(false);
            const formData = ref({});
            const currentUrl = ref('');
            const formRules = reactive({});
            const ldoptions = ref({});//联动下拉options
            const formRef = ref(null);
            const originalUser = ref({});
            
            onMounted(async() => {
                ldoptions.value = {};
                if(id.value) {
                    currentUrl.value = `${window.APP_CONFIG.baseurl}#/subpages/index/cxtj?id=${id.value}`;
                    await getbgsx();
                }
            });
            
        	const getbgsx = _.debounce(async() => {
                const res = await getbgsxapi({id: Number(id.value)});
  				if (!res.cxtj || res.cxtj.length < 1) {
					await handleQueryNotFound('该查询不存在');
					return;
				}
                if (isTimeValid(res.starttime) && isAfterShanghaiTime(res.starttime)) {
                    return handleQueryNotFound(`查询未开始！\n 开始时间：${formatDate(res.starttime)}`)
                }
                if (isTimeValid(res.endtime) && isBeforeShanghaiTime(res.endtime)) {
                    return handleQueryNotFound(`查询已结束！\n 结束时间：${formatDate(res.endtime)}`)
                }
				if (res.remark?.length && res.remark[0].value) {
                    title.value = "温馨提示";
				    showNotice.value = true;
				}
				// 初始化验证规则
				for (let k in res.fields) {
					if(res.sfbt) formRules[k] = generateRules(res.fields[k], true);
				}
				bgsx.value = res;
                //前台显示：1.全开放, 2.登录可见, 3.管理员，4.指定填报员
				if(bgsx.value.qtxs != '全开放'){
					originalUser.value = await getuser();
                    let role = originalUser.value?.Role;
                    if(bgsx.value.qtxs == '管理员' && role != 'admin') {
                    	return ElMessage.error('仅限管理员查询');
                    }else if(bgsx.value.qtxs == '指定填报员') {
                    	if (!['admin', 'xmgly', 'tby'].includes(role) || (role === 'tby' && !bgsx.value.tby.includes(originalUser.value.ID))) {
                            return ElMessage.error('您无权查询该项目');
                    	}
                    }
				}
				document.title = res.formname;
        	}, 200);
        	
            // 处理查询不存在的情况
			const handleQueryNotFound = (msg) => {
			    smartSpeak(msg);
				ElMessage.error(msg);
				setTimeout(() => {
					 router.push({name: 'home'});
				}, 600);
			}
			
            const getbz = (data) => {
				if(!data || data.length == 0) return '';
				var html = '';
				for (var o in data) {
					var arr = data[o]
					if (arr.value)  {
						arr.value = arr.value.replace(/\n/g, '<br>');
						if (arr.type  == 'text') {
							html = html + '<p style="margin:5px auto;">' + arr.value  + '</p>';
						}
						if (arr.type  == 'img') {
							html = html +
								'<p style="text-align:center;margin:5px auto;"><img style="width:100%;margin:auto;" src="' +
								arr.value  + '"></p>';
						}
						if (arr.type  == 'video') {
							html = html +
								'<p style="text-align:center;margin:5px auto;"><video controls="controls" style="width:300px;margin:auto;" src="' +
								arr.value  + '"></video></p>';
						}
					}
				}
				return html;
			}
			
			const close = () => {
				showNotice.value = false;
				if ((!bgsx.value.id || bgsx.value.id < 1)) {
					router.push({name: 'home'});
				}
			}
			
			const submitcxjg = _.debounce(async() => {
			    await formRef.value.validate();
                const hasValidInput = bgsx.value.cxtj?.length > 0 && bgsx.value.cxtj.some(k => Boolean(formData.value[k]));
                if (!hasValidInput) {
                    smartSpeak('至少要输入一项');
                    return ElMessage.error('至少要输入一项');
                }
				formData.value.id = Number(id.value);
				let data = encodeURIComponent(JSON.stringify(formData.value));
				if (bgsx.value.dblc) {
					//多表联查
					router.push({ name: 'dblc', query: { data: data } });
				}else{
				    router.push({ name: 'cxjg', query: { data: data } });
				}
			}, 200);
			
            //联动下拉 visible-change下拉框出现/隐藏时触发
            const handleVisibleChange = async (visible, key) => {
                if (visible) {
                    let id = bgsx.value.fields[key].kbtable;//联动表项目id
                    let fh = bgsx.value.fields[key].kbcxcol;//返回列
                    let max = Number(bgsx.value.fields[key].kbcxz);//总级数
                    let now = Number(bgsx.value.fields[key].kbfhcol);//当前级
                    if(id && fh && max > 1 && now && now <= max){
                        let values = {};//共支持5级下拉，如查第5级，需要传递1234级的key=>value
                        //遍历联动字段，查找联动级
                        const ldkeys = Object.keys(bgsx.value.fields).filter(key => bgsx.value.fields[key].type === 'linkselect');
                        for(let k of ldkeys) {
                            //不是最后一级时，要获取下级选项
                            if(bgsx.value.fields[k].kbfhcol < now) {
                                if(!formData.value[k]){
                                    values = {};
                                    break;//如果上级有空值，则禁止返回下级选项
                                }
                                let tempkey = bgsx.value.fields[k].kbcxcol;   //联动表中的查询列
                                values[tempkey] = formData.value[k];       //生成查询关联数组
                            }
                        }
                        //如果是第一级，或者有查询关联数组时，后端获取选项
                        if(now == 1 || Object.values(values).length > 0){
                            ldoptions.value[key] = await getldoptions({id, fh, max, now, values});
                        }
                    }
                }
            }
            //联动选项变化，下级要清空
            const lxChange = (key) => {
                let now = Number(bgsx.value.fields[key].kbfhcol);//当前级
                const ldkeys = Object.keys(bgsx.value.fields).filter(key => bgsx.value.fields[key].type === 'linkselect');
                for(let k of ldkeys) {
                    if(bgsx.value.fields[k].kbfhcol > now) {
                        console.log(k);
                        formData.value[k] = '';
                        ldoptions.value[k] = '';
                    }
                }
            }
        	
            return {
                formRef,
                formRules,
                handleVisibleChange,
                lxChange,
                ldoptions,
                title,
                getbgsx,
                bgsx,
                showNotice,
                handleQueryNotFound,
                getbz,
                close,
                submitcxjg,
                formData,
                currentUrl,
                originalUser
            };
        },
        
        template: `
	<div class="header row">
		<div class="col-lg-2 col-md-0">&nbsp;</div>
		<div class="col-lg-10 col-md-12">
			<a href="/pc"><img class="icon-logo" src="/pc_static/logo.png" /></a>
		</div>
	</div>

    <div v-if="bgsx?.remark && showNotice" class="notice-overlay">
        <div class="notice-modal">
          <div class="notice-content">
            <p class="notice-title">{{ title }}</p>
            <div class="notice-text">
              <div v-html="getbz(bgsx.remark)"></div>
            </div>
            <button @click="close" class="notice-button">我知道了</button>
          </div>
        </div>
    </div>
  
	<div class="c-center">
		<div style="height:7%;"></div>

		<div class="cen-form" v-if="bgsx?.id">
			<div class="ckhead">
				<p style="margin: 0; padding: 0;">{{bgsx.formname}}</p>
			</div>
			
            <el-scrollbar height="500px" style="padding: 30px;" v-if="bgsx && Object.keys(bgsx.cxtj).length > 0">
            	<el-form :model="formData" ref="formRef" :rules="formRules" @submit.prevent="submitcxjg" label-position="top">
                    <div v-for="k in bgsx.cxtj" :key="k">
                        <el-form-item :label="bgsx.fields[k].name" :prop="k">
                            <el-input v-if="bgsx.fields[k].type === 'text'" v-model="formData[k]" :placeholder="'请输入' + bgsx.fields[k].name"/>
                            <el-select v-else-if="bgsx.fields[k].type === 'select' && bgsx.fields[k].options" v-model="formData[k]" :placeholder="'请选择' + bgsx.fields[k].name" clearable style="width: 100%">
                            	<el-option v-for="option in bgsx.fields[k].options.split('/')" :key="option" :label="option"	:value="option" />
                            </el-select>
                            <el-input v-else-if="bgsx.fields[k].type === 'idcard'" v-model="formData[k]" :placeholder="'请输入' + bgsx.fields[k].name" />
                            <el-date-picker v-else-if="bgsx.fields[k].type === 'date'" v-model="formData[k]" :placeholder="'请选择' + bgsx.fields[k].name"
                            	type="date" clearable style="width: 100%" />
                            <el-date-picker v-else-if="bgsx.fields[k].type === 'datetime'" v-model="formData[k]" :placeholder="'请选择' + bgsx.fields[k].name"
                            	type="datetime" clearable style="width: 100%" />
                            <div v-else-if="bgsx.fields[k].type === 'radio' && bgsx.fields[k].options">
                            	<el-radio-group v-model="formData[k]">
                            		<el-radio v-for="option in bgsx.fields[k].options.split('/')" :key="option" :value="option">{{ option }}</el-radio>
                            	</el-radio-group>
                            </div>
                            <!--联动下拉-->
                            <template v-else-if="bgsx.fields[k].type === 'linkselect'">
                            	<el-select v-model="formData[k]" @visible-change="handleVisibleChange($event, k)" @change="lxChange(k)" clearable :placeholder="'请选择' + bgsx.fields[k].name">
                            		<el-option v-for="option in ldoptions[k]" :key="option" :label="option" :value="option"></el-option>
                            	</el-select>
                            </template>
                            <el-input v-else v-model="formData[k]" :placeholder="'请输入' + bgsx.fields[k].name" />
                    	</el-form-item>
                    </div>
                    <div class="cxdiv">
                        <el-button type="primary" native-type="submit" class="cxbutton">提 交 查 询</el-button>
                    </div>
            	</el-form>
                <!-- 显示二维码 -->
                <div class="ewm" v-if="currentUrl" style="margin-top:20px;">
                    <qrcode-vue :value="currentUrl" :size="200"></qrcode-vue>
                    <div class="footer-text">手机扫码查看</div>
                </div>
            </el-scrollbar>	

			<div class="ckfoot">
				<div style="padding: 0 20px">
					温馨提示：请使用windows自带Edge浏览器，或谷歌、360等浏览器打开网页，不支持IE8及以下浏览器。
				</div>
			</div>
		</div>
		<div style="height:40px;"></div>
	</div>
        `
    }